import ProductNameChoose from "@/components/Common/ProductNameChoose";
import { moneyFormat } from "@/utils/utils";
import { UploadOutlined } from "@ant-design/icons";
import TabPane from "@ant-design/pro-card/lib/components/TabPane";
import ProForm, { DrawerForm, ProFormDatePicker, ProFormDigit, ProFormGroup, ProFormSelect, ProFormText, ProFormTextArea } from "@ant-design/pro-form"
import { PageContainer } from "@ant-design/pro-layout"
import ProTable, { EditableProTable, ProColumns } from "@ant-design/pro-table"
import { Button, Card, Table, Tabs, Upload } from "antd";
import { useState } from "react";

export default () => {
  const [activeKey,setActiveKey] = useState("tab1");
  const [showDetail,setShowDetail] = useState(false);
  const [fileList,setFileList] =useState<any>([]);
  const [proModalVisible,setProModalVisible] = useState(false);

  const [packData,setPackData] = useState<any>([{name:'A套包',price:75000},{name:'B套包',price:85000}]);
  const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([0,1,2,3,4,5]);
  const [proData,setProData] = useState<any>([{code:'SM*NMW-10200',name:'机器人主机00001',price:50000,id:'1',num:1},{code:'SM*NMW-10201',name:'配件A',price:5000,id:'2',num:1}
  ,{name:'配件B',price:5000,id:'3',code:'SM*NMW-10202',num:1},{name:'配件C',price:5000,id:'4',code:'SM*NMW-10203',num:1},{name:'配件D',price:5000,id:'5',code:'SM*NMW-10204',num:1},
  {name:'配件E',price:5000,id:'6',code:'SM*NMW-10205',num:1}]);

  const columns_2:ProColumns[] = [
   
    {
      title: '产品名称',
      editable:false,
      dataIndex: 'name',
    },
    {
        title: '规格型号',
        dataIndex: 'code',
        editable:false,
    },
    {
      title: '数量',
      width:200,
      dataIndex: 'num',
    },
    {
        title: '标准价',
        valueType:'money',
        dataIndex: 'price',
        editable:false,
    },
    {
      title: '套包价',
      width:200,
      valueType:'money',
      dataIndex: 'money',
    },
    {
        title: "操作",
        fixed:'right',
        valueType: 'option',
        width:100,
      }
  ]

  const columns:ProColumns[] = [
    {
      title:'套包名称',
      dataIndex: 'name',
      // width:150,
      ellipsis:true,
    },
   
    {
      title:'套包金额',
      dataIndex: 'price',
      hideInSearch:true,
    },
    {
        title:'套包说明',
        dataIndex: 'nam',
        hideInSearch:true,
        renderText:()=>''
      },
    {
      title:'创建日期',
      dataIndex: 'name7in8',
      hideInSearch:true,
      renderText:()=>'2022-12-11'
    },
    {
      title: "操作",
      fixed:'right',
      valueType: 'option',
      width:100,
      render: (text, record:any,_, action) => [
        <a key="b2" onClick={()=>setShowDetail(true)}>详情</a>
      ]
    }
  ]

  return (
    <PageContainer>
      <ProTable
      headerTitle=''
      pagination={{
        pageSizeOptions:['20', '100', '500']
      }}
      toolBarRender={() => [
        <Button
          type="primary"
          key="primary"
          onClick={() => {
            setShowDetail(true)
          }} >新建</Button>]
        }
     dataSource={packData}
      columns={columns}
      rowKey="id"
      search={{span:6}}
      toolbar={{
        settings: [],
      }}
      />
      <DrawerForm title='详情' width={1200} visible={showDetail}  onVisibleChange={v=>{setShowDetail(v)}}  drawerProps={{
          destroyOnClose:true,
          forceRender:true
        }}>
         <EditableProTable headerTitle='产品列表'   toolBarRender={()=>[<Button
                    type='primary'
                    key='new'
                    onClick={() => {
                        setProModalVisible(true)
                    }}
                    >新增产品
                    </Button>]}
                  toolbar={{settings:[]}} rowKey='pIndex' columns={columns_2} value={proData} recordCreatorProps={false} onChange={data => {
          setEditableRowKeys(data.map((item: any) => item.pIndex));
          setProData(data);
        }} editable={{
          type: 'multiple',
          editableKeys,
          onValuesChange: (record, recordList) => {
            setProData(recordList);
          },
          actionRender: (row, config, defaultDoms) => {
            return [defaultDoms.delete];
          },
          onChange: setEditableRowKeys
      }} summary={()=>{
        return (
          <>
          <Table.Summary.Row>
            <Table.Summary.Cell index={1} colSpan={2}>总计:</Table.Summary.Cell>
            <Table.Summary.Cell index={1} align='left'>
              6
            </Table.Summary.Cell>
            <Table.Summary.Cell index={1} align='left'>
            ￥{moneyFormat(75000)}
            </Table.Summary.Cell>
            <Table.Summary.Cell index={1} align='left'>
            </Table.Summary.Cell>
          </Table.Summary.Row>             
        </>
        );
      }}></EditableProTable>

        <ProductNameChoose
            onCancel={() => {
              setProModalVisible(false)
            }}
            onSubmit={async (value) => {
              setProModalVisible(false)
            }}
            modalVisible={proModalVisible}
            values={[]}
        />
      </DrawerForm>
    </PageContainer>)
}